<template>
  <div class="header">
    <span class="txt">全选</span>
    <input type="checkbox" name="" id="" class="ck" v-model="allCheck" />
    <span class="txt">/</span>
    <span class="txt">反选</span>
    <input type="checkbox" name="" id="" class="ck" v-model="oppCheck" ref="opp"/>
    <button class="btn" @click="delItems">删除 {{ ck_num }} 封</button>
  </div>
</template>

<script setup>
import { nextTick } from "vue";
import mitts from "../bus";
import { usedelItemsHook } from "./Hooks/useDelItemsHooks";
const { delItems } = usedelItemsHook();
const list = ref([]);
mitts.on("giveList", (e) => {
  list.value = e;
});
const ck_num = computed(() => {
  return list.value.reduce((sum, item) => {
    if (item.isSelected) {
      return sum + 1;
    }
    return sum;
  }, 0);
});
const allCheck = computed({
  get() {
    return list.value.every((item) => item.isSelected === true);
  },
  set(val) {
    return list.value.forEach((item) => (item.isSelected = val));
  },
});
const opp = ref(null);
const oppCheck = computed({
  // vue更新是批量更新，v-model绑定表单的checked的时候，每次更新，
  // 都会比较新旧值，只有新旧值不一样的时候才会给checked重新赋值。
  // 当列表中从全部未选中到选中一项时，通过计算，v-model的值都是false，
  // 新旧值一样，所以就不更新表单的checked属性。
  // 而我们手动点击，会自动改变表单的checked属性，这是一种默认行为。
  // 【（同时，也会触发表单的click和change事件）。】
  // 所以，解决方法可以是，我们在每次重新计算v-model值的时候，即get调用时，
  // 手动地把计算结果res，直接赋值给，表单opp这个DOM元素的.checked属性
  get() {
    const res = list.value.every((item) => item.isSelected === true);
    if (opp.value) {
      opp.value.checked = res
    }
    return res;
  },
  set() {
    list.value.forEach((item) => (item.isSelected = !item.isSelected));
  },
});
/* watch(oppCheck, () => {
  console.log(2);
}); */
</script>

<style lang="scss" scoped>
.header {
  margin-bottom: 20px;
  .txt {
    margin-right: 5px;
    font-weight: 700;
  }
  .ck {
    margin-right: 5px;
  }
  .btn {
    border: 2px solid #000;
    padding-block: 2px;
    padding-inline: 4px;
    background-color: #ff4051;
    font-size: 12px;
  }
}
</style>
